<template>
  <el-dialog title="修改资料" :visible.sync="formLabelAlign.adminUpdateFormVisible" @close="closeDialog">
    <el-form :label-position="labelPosition" label-width="80px" :model="updateAdmin" :rules="rules" ref="updateAdmin">
      <el-form-item label="登陆账号" :label-width="formLabelWidth" prop="mNo">
        <el-input v-model="updateAdmin.mNo" readonly></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" :label-width="formLabelWidth" prop="mName">
        <el-input v-model="updateAdmin.mName"></el-input>
      </el-form-item>
      <el-form-item label="原密码" :label-width="formLabelWidth" prop="mPassword">
        <el-input type="password" v-model="updateAdmin.mPassword" placeholder="请输入原密码，不修改请留空"></el-input>
      </el-form-item>
      <el-form-item label="新密码" :label-width="formLabelWidth" prop="mNewPassword">
        <el-input type="password" v-model="updateAdmin.mNewPassword" placeholder="6-16位字符，不修改请留空"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" :label-width="formLabelWidth" prop="mNewPassword2">
        <el-input type="password" v-model="updateAdmin.mNewPassword2" placeholder="确认新密码，如果没有填写新密码请勿填写"></el-input>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-radio v-model="updateAdmin.mSex" label="男">男</el-radio>
        <el-radio v-model="updateAdmin.mSex" label="女">女</el-radio>
      </el-form-item>
<!--      <el-form-item label="角色名" :label-width="formLabelWidth" v-if="formLabelAlign.aAccount!=='system'">-->
<!--        <el-select v-model="updateAdmin.rName" @change="changeRoleName">-->
<!--          <el-option-->
<!--              v-for="item in rNameAry"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label="手机" :label-width="formLabelWidth" prop="mPhone">
        <el-input v-model="updateAdmin.mPhone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" :label-width="formLabelWidth" prop="mEmail">
        <el-input type="email" v-model="updateAdmin.mEmail"></el-input>
      </el-form-item>
      <el-form-item class="form-bottom" :label-width="formLabelWidth">
        <el-button class="form-btn" @click="submitUpdate('updateAdmin',updateAdmin)">保存</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {mapActions, mapMutations, mapState} from "vuex";

export default {
  name: "AdminEdit",
  data() {
    //检验旧密码
    let validateOldPwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入原密码'));
      } else if(value!==this.updateAdmin.mPassword){
        callback(new Error('原密码输入错误'));
      }else{
        callback()
      }
    }
    //检验密码
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        if (this.updateAdmin.mNewPassword2 !== '') {
          this.$refs.updateAdmin.validateField('checkPass');
        }
        callback();
      }
    }
    //检验再次输入密码
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'));
      } else if (value !== this.updateAdmin.mNewPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    }
    //检验手机号
    let validateTel = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'));
      } else {
        let reg = /^1[3456789]\d{9}$/
        if (!reg.test(value)) {
          callback(new Error('请输入11位正确的手机号'))
        }
        callback()
      }
    }
    //检验邮箱
    let checkEmail = (rule, value, callback) => {
      const mailReg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }, 100)
    }
    return {
      rNameAry:[],
      aNewPwd1:'',
      aNewPwd2:'',
      labelPosition: 'right',
      formLabelWidth: '120px',
      value: '内置管理员',
      rules: {
        mNo: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
        ],
        mName: [
          {required: true, message: '请输入名字', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
        ],
        mPassword: [{validator: validateOldPwd, trigger: 'blur'}],
        mNewPassword: [{validator: validatePass, trigger: 'blur'}],
        mNewPassword2: [{validator: validatePass2, trigger: 'blur'}],
        mPhone: [{validator: validateTel, trigger: 'blur'}],
        mEmail: [{validator: checkEmail, trigger: 'blur'}],
      }
    }
  },
  computed: {
    ...mapState('admin', ['formLabelAlign', 'updateAdmin'])
  },
  methods: {
    ...mapActions('admin',['updateInfo']),
    ...mapMutations('admin', ['closeDialog']),
    //提交表单验证
    submitUpdate(updateAdmin, obj) {
      this.$refs[updateAdmin].validate((valid) => {
        if (valid) {
          this.updateInfo(obj)
        } else {
          return false;
        }
      })
    },
    //获取rName
    async getrName() {
      await this.$axios({
        method: 'POST',
        url: '/role/showRoles',
        params: {
          page: 1,
          limit: 1000
        }
      }).then(res => {
        this.mainData = res.data.data
        this.mainData.forEach(item => {
          let obj = {value: item.rName, label: item.rName}
          this.rNameAry.push(obj)
        })
      })
    }
  },
  created() {
    this.getrName()
  }
}
</script>

<style scoped>
.form-btn {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #FFF;
}

.form-bottom {
  padding: 20px 0;
  border-top: 1px dashed #beb8b8;
}

</style>